<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的主页</title>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
    <style>
        /* 禁止文字选中 */
        .forbiden_txt,h1,
        h2,h3,h4,h5,p,font,label{
            -o-user-select: none;
            -moz-user-select: none; /*火狐 firefox*/
            -webkit-user-select: none; /*webkit浏览器*/
            -ms-user-select: none; /*IE10+*/
            -khtml-user-select :none; /*早期的浏览器*/
            user-select: none;
        }

        body{
            overflow-x:hidden;
            overflow-y:hidden;
            /* 登录按钮长宽 */
            --login_WH:100px;/*20%;*/

            /* 主题色 */
            --main_color:#2a3fff;
            /* 次主题色 */
            --sub_color: rgb(4, 167, 140);
            /* 主要字体色 */
            --main-font-color:#000;
            /* 次要字体色 */
            --sub-font-color:#666;
            /* 淡灰色 */
            --sub-color:#aaa;
            --cir_shadow:rgb(255, 113, 87);

            /* 动画延时快 */
            --transform_qukily:0.3s;
            /* 动画延时慢 */
            --transform_slowily:0.5s;
        }

        *{
            margin: 0;
            padding: 0;
            transition: opacity var(--transform_slowily);
        }

        /*/////////////////////////////////滚动条样式///////////////////////////////////*/
        /* 设置滚动条的样式 */
        *::-webkit-scrollbar {
            width:10px;
            border-radius: 20px;
        }
        /* 滚动槽 */
        *::-webkit-scrollbar-track {
            background-color: #fff;
            -webkit-box-shadow: var(--sub_color);
            border-radius:10px;
        }
        /* 滚动条滑块 */
        *::-webkit-scrollbar-thumb {
            background: var(--sub_color);
            border-radius: 20px;
        }
        *::-webkit-scrollbar-thumb:window-inactive {
            background:rgba(255,0,0,0.4);
        }
        *::-webkit-scrollbar {
            /*display: none;*/
        }

        input,textarea{
            caret-color: var(--sub_color);
            border-radius: 2px;
            border: 1px solid var(--sub_color);
        }
        input:focus,textarea:focus{
            outline: 2px solid var(--sub_color);
            /*box-shadow: 0 0 8px var(--sub_color);*/
        }
        input:hover,textarea:hover{
            box-shadow: 0 0 6px var(--sub_color);
        }



        .my_tip{
            position: absolute;
            display: none;
            top: 50%;
            left: 50%;
            color: #fff;
            font-size: 14px;
            transform: translate(-50%,-50%);
            background-color: rgba(4, 167, 140,0.6);
            /*display: inline-block;*/
            padding: 5px 15px;
            border-radius:2px;
            opacity: 0;
            z-index: 99;
        }

        .my_tip span{
            padding: 2px;
            text-align: center;
            color: #fff;
        }
    </style>

    <style>
        *{
            margin: 0;
            padding: 0;
            -o-user-select: none;
            -moz-user-select: none; /*火狐 firefox*/
            -webkit-user-select: none; /*webkit浏览器*/
            -ms-user-select: none; /*IE10+*/
            -khtml-user-select :none; /*早期的浏览器*/
            user-select: none;
        }
        .mine-box{
            position: relative;
            width: 100%;
            height: 100%;
        }
        .mine-top{
            background-color: #c7254e;
            position: fixed;
            top: 0;
            width: 100%;
            height: 15%;
        }
        .mine-left,
        .mine-right{
            height: 85%;
            top: 15%;
        }
        .mine-left{
            width: 10%;
            background-color: #fff;
            top: 15%;
            position: fixed;
            display: inline-block;
        }

        .mine-left ul{
            width: 100%;
            height: 10%;
            list-style: none;
        }
        .mine-left ul li{
            position: relative;
            width: 100%;
            /*height: 100%;*/
            padding-top: 20px;
            padding-bottom: 20px;
            font-size: 14px;

            background-color: #fff;
            color: var(--sub_color);
            cursor: pointer;
            text-align: left;
            transition: all 0.8s;
        }
        .mine-left ul li:hover{

            background-color: var(--sub_color);
            color: #fff;
            /*text-align: center;*/
        }
        .mine-left ul li a{
            color: var(--sub_color);
            margin-left: 10px;
            outline: none;
            text-decoration: none;
        }
        .mine-left ul li:hover a{
            animation:move_center 0.5s ease-in;
            animation-fill-mode: forwards;
            color: #fff;
        }

        @keyframes move_center {
            0%{}
            100%{
                margin-left: 40px;
                font-weight: 800;
            }
        }

        .mine-right{
            width: 90%;
            left: 10%;
            background-color: #fff;
            position: fixed;
            display: inline-block;
            /*border-left: 1px solid #aaa;*/
        }
        .mine-right .content{
            width: 100%;
            height: 100%;
            overflow-y: scroll;
            background-color: white;
            z-index: 20;
        }
        .mine-right .content{
            overflow: hidden;
        }
        /* 设置滚动条的样式 */
        .mine-right .content::-webkit-scrollbar {
            /*width:10px;*/
            /*border-radius: 20px;*/

            display: none !important;
        }
        /* 滚动槽 */
        .mine-right .content::-webkit-scrollbar-track {
            background-color: #fff;
            -webkit-box-shadow: var(--sub_color);
            border-radius:10px;
            display: none;
        }
        /* 滚动条滑块 */
        .mine-right .content::-webkit-scrollbar-thumb {
            background:var(--sub_color);
            border-radius: 20px;
            display: none;
        }
        .mine-right .content::-webkit-scrollbar-thumb:window-inactive {
            background:rgba(255,0,0,0.4);
            display: none;
        }




        .mine-right .content .sub-content{
            width: 100%;
            height: 100%;
        }
        .mine-right .content .sub-1{
            border-left: 2px solid #c77a03;
            /*background-color: #c74c19;*/
        }
        .mine-right .content .sub-2{
            border-left: 2px solid #c72631;
            /*background-color: #c7c22f;*/
        }
        .mine-right .content .sub-3{
            border-left: 2px solid #c73ab2;
            /*background-color: #7cc726;*/
        }
        .mine-right .content .sub-4{
            border-left: 2px solid #932ec7;
            /*background-color: #23c762;*/
        }
        .mine-right .content .sub-5{
            border-left: 2px solid #4e65c7;
            /*background-color: #33c6c7;*/
        }
        .mine-right .content .sub-6{
            border-left: 2px solid #25aac7;
            /*background-color: #345fc7;*/
        }
        .mine-right .content .sub-7{
            border-left: 2px solid #1bc779;
            /*background-color: #723fc7;*/
        }
        .mine-right .content .sub-8{
            border-left: 2px solid #7ec731;
            /*background-color: #c73a93;*/
        }
    </style>

    //顶部横栏
    <style>
        .bruce {
            height: 100%;
            /*height: 100%;*/
            /*background-image: linear-gradient(270deg, #8146b4, #6990f6);*/
            background-image: linear-gradient(270deg, var(--sub_color), #93bcc7);
        }

        .bubble-bgwall {
            overflow: hidden;
            position: relative;
            margin: 0 auto;
            /*width: 1200px;*/
            width: 120px;
            height: 100%;
            float:right;
            /*margin-right:10px;*/
        }
        .bubble-bgwall li {
            display: flex;
            position: absolute;
            bottom: -20px;
            /*justify-content: center;*/
            justify-content: right;
            align-items: right;
            border-radius: 100%;
            width: 5px;
            height: 5px;
            /*width: 50px;*/
            /*height: 50px;*/
            /*background-color: rgba(0, 0, 0, 1);*/
            background-color: #fff;
            color: #ccc;
            animation: bubble 5s infinite;
        }
        .bubble-bgwall li:nth-child(1) {
            left: 10%;
        }
        .bubble-bgwall li:nth-child(2) {
            left: 20%;
            /*width: 90px;
            height: 90px;*/
            width: 9px;
            height: 9px;
            animation-duration: 7s;
            animation-delay: 2s;
        }
        .bubble-bgwall li:nth-child(3) {
            left: 25%;
            animation-delay: 4s;
        }
        .bubble-bgwall li:nth-child(4) {
            left: 40%;
            /*width: 60px;
            height: 60px;*/
            width: 6px;
            height: 6px;
            /*background-color: rgba(255, 255, 255, 0.3);*/
            background-color: #fff;
            animation-duration: 8s;
        }
        .bubble-bgwall li:nth-child(5) {
            left: 70%;
        }
        .bubble-bgwall li:nth-child(6) {
            left: 80%;
            width: 12px;
            height: 12px;
            /*width: 120px;
            height: 120px;*/
            /*background-color: rgba(255, 255, 255, 0.2);*/
            background-color: #fff;
            animation-delay: 3s;
        }
        .bubble-bgwall li:nth-child(7) {
            left: 32%;
            /*width: 160px;
            height: 160px;*/
            width: 16px;
            height: 16px;
            animation-delay: 2s;
        }
        .bubble-bgwall li:nth-child(8) {
            left: 55%;
            /*width: 40px;
            height: 40px;*/
            width: 4px;
            height: 4px;
            font-size: 12px;
            animation-duration: 15s;
            animation-delay: 4s;
        }
        .bubble-bgwall li:nth-child(9) {
            left: 25%;
            /*width: 40px;
            height: 40px;*/
            width: 4px;
            height: 4px;
            /*background-color: rgba(255, 255, 255, 0.3);*/
            background-color: #fff;
            font-size: 12px;
            animation-duration: 12s;
            animation-delay: 2s;
        }
        .bubble-bgwall li:nth-child(10) {
            left: 85%;
            /*width: 160px;
            height: 160px;*/
            width: 16px;
            height: 16px;
            animation-delay: 5s;
        }

        @keyframes bubble {
            0% {
                opacity: 0.5;
                transform: translateY(0) rotate(45deg) scale(1.0);
                border-radius: 100%;
            }
            /*25% {
              opacity: 0.75;
              transform: translateY(-40px) rotate(90deg) scale(1.2);
            }
            50% {
              opacity: 1;
              transform: translateY(-60px) rotate(135deg) scale(1.6);
            }*/
            100% {
                opacity: 0;
                transform: translateY(-100px) rotate(180deg) scale(2.2);
                border-radius: 100%;
            }
        }

        .bruce .logo {
            float:left;
            color: #fff;
            font-family: Helvetica, Arial, sans-serif;
            font-size: 2em;
            margin: 2em 0.5em 0 10px;
        }
        .bruce .logo .box-outer {
            border-radius:5px;
            display: inline-block;
            animation: shift 4.5s 1s steps(3, start) backwards;
            /*animation-iteration-count: infinite;*/
        }
        .bruce .logo .box-inner {
            display: inline-block;
            width: .74em;
            height: .74em;
            background-color: #fff;
            animation-name: roll;
            animation-duration: 2s;
            animation-delay: 2s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
            transform-origin: bottom right;
            border-radius:5px;
        }

        @keyframes roll {
            from{
                box-shadow: 5px 0 5px var(--sub_color);
                transform: translateX(-300%);
            }
            10% {
                opacity: 1;
                transform: translateX(-100%);
                animation-timing-function: ease-in-out;
            }
            20% {
                transform: translateX(-100%) skewX(15deg);
            }
            28% {
                transform: translateX(-100%) skewX(0deg);
                animation-timing-function: ease-out;
            }
            45% {
                box-shadow: 4px 6px 5px var(--sub_color);
                transform: translateX(-100%) skewX(-5deg) rotate(20deg) scale(1.1);
                animation-timing-function: ease-in-out;
            }
            50% {
                box-shadow: 2px 5px 5px var(--sub_color);
                transform: translateX(-100%) skewX(-5deg) rotate(45deg) scale(1.1);
                animation-timing-function: ease-in;
            }
            60% {
                transform: translateX(-100%) rotate(90deg);
                box-shadow: 0 5px 5px var(--sub_color);
            }
            65% {
                transform: translateX(-100%) rotate(90deg) skewX(10deg);
                box-shadow: -5px 0px 5px var(--sub_color);
            }
            70% {
                transform: translateX(-100%) rotate(90deg) skewX(0deg);
                box-shadow: 0 5px 5px var(--sub_color);
            }
            90%{
                border-radius: 50%;
                opacity: 1;
                box-shadow: 0 0 5px var(--sub_color);
                color: var(--sub_color);
            }
            to {

                transform: translateX(-100%) rotate(90deg);
                /*box-shadow: 0 0 5px var(--sub_color);*/
                color: #c7254e;
                opacity: 0;
            }
        }
        @keyframes shift {
            from {
                transform: translateX(-200%);
            }
        }
        .bruce .logo .logo-box{
            border-right: 2px solid #ccc;
        }
        .bruce .logo .logo-box,
        .bruce .logo .logo-model{
            border-bottom: 2px solid #ccc;
        }
    </style>

    <style type="text/css">
        .progressBar {
            margin-top:0;
            width:100%;
            height:1px;
            background: #ffffff;
            border-radius:0px;
        }
        .barContent {
            width: 12.5%;
            height: 1px;
            background: rgb(4, 167, 140);
            border-radius: 0;
            transition: width 1s;
        }
    </style>

<!--    sub-1-->
    <style>
        #person-img,
        #person-img-new{
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background-color: var(--sub_color);
        }
        .sub-1{
            position: relative;
        }
        .mine-box .mine-right .content .person-msg,
        .mine-box .mine-right .content .modify-panel{
            position: absolute;
            width: 80%;
            height: 80%;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            z-index: 5;
        }

        /*修改面板*/
        .mine-box .mine-right .content .modify-panel{
            display: none;
            background-color: #fff;
            z-index: 10;
        }

        .mine-box .mine-right .content .person-msg td,
        .mine-box .mine-right .content .modify-pane td{
            font-size: 14px;
            border-bottom: 1px solid #666;
        }
        #modify-user,
        #modify-user-ack{
            margin-right: 20px;
            width: 100px;
            height: 30px;
            /*margin-top: 10px;*/
            /*margin-bottom: 20px;*/
            color: var(--sub_color);
            background-color: #fff;
            cursor: pointer;
            font-size: 14px;
            font-weight: 400;
            transition: all var(--transform_slowily);
        }
        #modify-user:hover,
        #modify-user-ack:hover{
            background-color: var(--sub_color);
            color: #fff;
        }
    </style>

<!--    sub-2-->
    <style>
        .inline_block{
            display: inline-block;
        }
        .float_right{
            float: right;
        }
        .sub-2{
            position: relative;
        }
        .sub-2 .balance-box{
            position: absolute;
            width: 80%;
            height: 80%;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
        .sub-2 .balance-tab{
            width: 100%;
            height: 100px;
            background-color: var(--sub_color);border-radius: 5px;box-shadow: 0 0 10px var(--sub_color);
        }
        .sub-2 .balance-items{
            width: 100%;
            height: calc(100% - 100px);
            overflow: scroll;
            max-height: calc(100% - 100px);
            min-height: calc(100% - 100px);
        }


        .sub-2 .balance-items tbody {
            display: block;
            height: 300px;
            overflow-y: scroll;
            border-bottom: 1px solid var(--sub_color);
            border-top: 1px solid var(--sub_color);
        }

        .sub-2 .balance-items tr {
            display: table;
            width: 100%;
            height: 40px;
            table-layout: fixed;/*重要  表格固定算法*/
        }

        .sub-2 .balance-items thead {/*留出滚动条的位置*/
            width: calc(100% - 1em)
        }

    </style>
</head>
<body>
<!--    <div class="my_tip">-->
<!--    <div>-->
<!--        <span>提示&#45;&#45;信息</span>-->
<!--    </div>-->
<!--</div>-->
    <div class="mine-box">
        <div class="mine-top">
            <div class="bruce">
                <h1 class="logo">
                    <span class="box-outer">
                        <span class="box-inner" style="position: relative;width: 20px;height: 20px;">
                            <font style="position:absolute;color: var(--sub_color);font-size: 25px;text-align: center;top:50%;left:50%;transform: translate(-50%,-50%) rotate(-90deg);transition: all 0.5s;">i</font>
                        </span>
                    </span>
                     <span class="logo-box">IC&nbsp;</span><!--
                    --><span class="logo-model">Card&nbsp;Management</span>
                </h1>
                <ul class="bubble-bgwall">
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>
        <div class="mine-left">
            <ul>
                <li id="a_1">
                    <a href="#sub-1" target="_self" title="悬停文本">我的信息</a>
                </li>
                <li id="a_2">
                    <a href="#sub-2" target="_self" title="悬停文本">账户余额</a>
                </li>
                <li id="a_3">
                    <a href="#sub-3" target="_self" title="悬停文本">管理卡</a>
                </li>
                <li id="a_4">
                    <a href="#sub-4" target="_self" title="悬停文本">我的消费</a>
                </li>
                <li id="a_5">
                    <a href="#sub-5" target="_self" title="悬停文本">挂失记录</a>
                </li>
                <li id="a_6">
                    <a href="#sub-6" target="_self" title="悬停文本">注销记录</a>
                </li>
                <li id="a_7">
                    <a href="#sub-7" target="_self" title="悬停文本">账号变更</a>
                </li>
                <li id="a_8">
                    <a href="#sub-8" target="_self" title="悬停文本" target="_top" title="悬停文本">账号安全</a>
                </li>
                <li>
                    <a href="#">退   出</a>
                </li>
            </ul>
        </div>
        <div class="mine-right">
            <div class="progressBar" id="progressBar">
                <div class="barContent" id="barContent"></div>
            </div>
            <div class="content">
                <div class="sub-content sub-1" name="sub-1">
                    <table class="modify-panel">
                        <tfoot>
                        <tr>
                            <td colspan="4" align="left" style="outline: none;border-bottom: 0;">
                                <span  style="background-color: #c7254e;border-radius: 5px;border: 2px solid #fff;color: #fff;padding: 2px 1px;">
                                    Modify
                                </span>
                            </td>
                        </tr>
                        </tfoot>
                        <tr style="padding-bottom: 0;background-color: var(--sub_color);">
                            <td align="center" colspan="4" style="padding-bottom: 0;margin-bottom: 0;">
                                <img src="D:/桌面/课程设计/UI/img/defult_man.png" id="person-img-new">
                            </td>
                        </tr>
                        <tr>
                            <td align="right" width="25%">姓名：</td>
                            <td align="left" width="25%">
                                <input type="text" name="uName" value="肖家海">
                            </td>
                            <td align="right" width="25%">性别：</td>
                            <td align="left" width="25%">男</td>
                        </tr>
                        <tr>
                            <td align="right" width="25%">姓名：</td>
                            <td align="left" width="25%">1</td>
                            <td align="right" width="25%">性别：</td>
                            <td align="left" width="25%">1</td>
                        </tr>
                        <tr>
                            <td align="right" width="25%">姓名：</td>
                            <td align="left" width="25%">1</td>
                            <td align="right" width="25%">性别：</td>
                            <td align="left" width="25%">1</td>
                        </tr>
                        <tr>
                            <td align="right" width="25%">姓名：</td>
                            <td align="left" width="25%">1</td>
                            <td align="right" width="25%">性别：</td>
                            <td align="left" width="25%">1</td>
                        </tr>
                        <tr>
                            <td align="right" width="25%">姓名：</td>
                            <td align="left" width="25%">1</td>
                            <td align="right" width="25%">性别：</td>
                            <td align="left" width="25%">1</td>
                        </tr>
                        <tr>
                            <td align="right" width="25%">姓名：</td>
                            <td align="left" width="25%">1</td>
                            <td align="right" width="25%">性别：</td>
                            <td align="left" width="25%">1</td>
                        </tr>
                        <tr>
                            <td align="right" width="25%">姓名：</td>
                            <td align="left" width="25%">1</td>
                            <td align="right" width="25%">性别：</td>
                            <td align="left" width="25%">1</td>
                        </tr>
                        <tr>
                            <td colspan="4" align="right" style=" border-bottom: 0px solid #666;">
                                <input type="button" value="确    认" id="modify-user-ack">
                            </td>
                        </tr>
                    </table>


                    <table class="person-msg">
                        <tfoot>
                            <tr>
                                <td colspan="4" align="left" style="outline: none;border-bottom: 0;">
                                    <span  style="background-color: #04a78c;border-radius: 5px;border: 2px solid #fff;color: #fff;padding: 2px 4px;">
                                        Mine
                                    </span>
                                </td>
                            </tr>
                        </tfoot>
                        <tr style="padding-bottom: 0;background-color: var(--sub_color);">
                            <td align="center" colspan="4" style="padding-bottom: 0;margin-bottom: 0;">
                                <img src="D:/桌面/课程设计/UI/img/defult_man.png" id="person-img">
                            </td>
                        </tr>
                        <tr>
                            <td align="right" width="25%">姓名：</td>
                            <td align="left" width="25%">肖家海</td>
                            <td align="right" width="25%">性别：</td>
                            <td align="left" width="25%">男</td>
                        </tr>
                        <tr>
                            <td align="right" width="25%">姓名：</td>
                            <td align="left" width="25%">1</td>
                            <td align="right" width="25%">性别：</td>
                            <td align="left" width="25%">1</td>
                        </tr>
                        <tr>
                            <td align="right" width="25%">姓名：</td>
                            <td align="left" width="25%">1</td>
                            <td align="right" width="25%">性别：</td>
                            <td align="left" width="25%">1</td>
                        </tr>
                        <tr>
                            <td align="right" width="25%">姓名：</td>
                            <td align="left" width="25%">1</td>
                            <td align="right" width="25%">性别：</td>
                            <td align="left" width="25%">1</td>
                        </tr>
                        <tr>
                            <td align="right" width="25%">姓名：</td>
                            <td align="left" width="25%">1</td>
                            <td align="right" width="25%">性别：</td>
                            <td align="left" width="25%">1</td>
                        </tr>
                        <tr>
                            <td align="right" width="25%">姓名：</td>
                            <td align="left" width="25%">1</td>
                            <td align="right" width="25%">性别：</td>
                            <td align="left" width="25%">1</td>
                        </tr>
                        <tr>
                            <td align="right" width="25%">姓名：</td>
                            <td align="left" width="25%">1</td>
                            <td align="right" width="25%">性别：</td>
                            <td align="left" width="25%">1</td>
                        </tr>
                        <tr>
                            <td colspan="4" align="right" style=" border-bottom: 0px solid #666;">
                                <input type="button" value="修    改" id="modify-user">
                            </td>
                        </tr>
                    </table>
                </div>
                <div class="sub-content sub-2" name="sub-2">
                   <div class="balance-box">
                        <table class="balance-tab">
                            <tr>
                                <td>
                                    <img src="" class="inline_block" alt="" style="width: 100px;height: 100px;border-radius: 5px;">
                                    <div class="inline_block" >
                                        <span>
                                            <font style=" border-radius:5px;font-size: 10px;font-family: 'Adobe 宋体 Std L';color: var(--sub_color);background-color: #fff;padding: 2px;margin-left: 2px;">余额￥</font>
                                            <font id="money-blance" style="font-size: 42px;font-weight: 400;color:#fff;font-family: 'Courier New';">99.99</font>
                                        </span>
                                    </div>
                                </td>
                                <td align="right">
                                    <div class="inline_block daliy-point">
                                        <span style="margin-right: 20px;background-color: #c7254e;border-radius: 5px;padding: 5px;color: #fff;cursor: pointer;">签到</span>
                                    </div>
                                </td>
                            </tr>
                        </table>
                        <table class="balance-items">
                            <thead>
                                <th align="left" colspan="6">资金明细</th>
                            </thead>
                            <thead>
                                <th align="center">序号</th>
                                <th align="center">变更类型</th>
                                <th align="center">变更金额</th>
                                <th align="center">操作账号</th>
                                <th align="center">余额</th>
                                <th align="center">时间</th>
                            </thead>
                            <tfoot>

                                <tr>
                                    <td align="left" colspan="3" >
                                        每页:<!--
                                        --><select name="pages" id="pageNum" style="margin-left: 10px;">
                                            <option value="5">05</option>
                                            <option value="10">10</option>
                                            <option value="20">20</option>
                                            <option value="50">50</option>
                                        </select>
                                        条&nbsp;&nbsp;&nbsp;&nbsp;共
                                        <span>1</span>
                                        页
                                    </td>
                                    <td align="right" colspan="3">
                                        <div class="inline_block">上一页</div>
                                        <ul class="inline_block">
                                            <li class="inline_block">1</li>
                                            <li class="inline_block">2</li>
                                            <li class="inline_block">3</li>
                                            <li class="inline_block">4</li>
                                        </ul>
                                        <div class="inline_block" style="margin-right: 10px;">下一页</div>
                                    </td>
                                </tr>
                            </tfoot>
                            <tbody >
                                <tr >
                                    <td align="center">1</td>
                                    <td align="center">充值</td>
                                    <td align="center">100.00</td>
                                    <td align="center">xjh</td>
                                    <td align="center">100.00</td>
                                    <td align="center">2021/12/01 22：23：22</td>
                                </tr>
                                <tr align="center">
                                    <td align="center">1</td>
                                    <td align="center">充值</td>
                                    <td align="center">100.00</td>
                                    <td align="center">xjh</td>
                                    <td align="center">100.00</td>
                                    <td align="center">2021/12/01 22：23：22</td>
                                </tr>
                                <tr align="center">
                                    <td align="center">1</td>
                                    <td align="center">充值</td>
                                    <td align="center">100.00</td>
                                    <td align="center">xjh</td>
                                    <td align="center">100.00</td>
                                    <td align="center">2021/12/01 22：23：22</td>
                                </tr>
                                <tr align="center">
                                    <td align="center">1</td>
                                    <td align="center">充值</td>
                                    <td align="center">100.00</td>
                                    <td align="center">xjh</td>
                                    <td align="center">100.00</td>
                                    <td align="center">2021/12/01 22：23：22</td>
                                </tr>
                                <tr align="center">
                                    <td align="center">1</td>
                                    <td align="center">充值</td>
                                    <td align="center">100.00</td>
                                    <td align="center">xjh</td>
                                    <td align="center">100.00</td>
                                    <td align="center">2021/12/01 22：23：22</td>
                                </tr>
                                <tr align="center">
                                    <td align="center">1</td>
                                    <td align="center">充值</td>
                                    <td align="center">100.00</td>
                                    <td align="center">xjh</td>
                                    <td align="center">100.00</td>
                                    <td align="center">2021/12/01 22：23：22</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="sub-content sub-3" name="sub-3"></div>
                <div class="sub-content sub-4" name="sub-4"></div>
                <div class="sub-content sub-5" name="sub-5"></div>
                <div class="sub-content sub-6" name="sub-6"></div>
                <div class="sub-content sub-7" name="sub-7"></div>
                <div class="sub-content sub-8" name="sub-8"></div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        function processBar(val) {
            $("#barContent").css("width", (val * 12.5) + "%" ) ;
        }
    </script>
<script>
    var heightH = window.innerHeight * 0.85;

    function move(moveObj,moveTarget,scrollStep) {
        //$(moveObj).offset().top
        $(moveTarget).animate({
            scrollTop: heightH*scrollStep
        }, 800);
    }

    $(function () {
        var lis = $(".mine-left>ul").find("li");
        var len = lis.length;
        for(let i=0;i<len-1;i++){
            $(lis[i]).click(function(){
                move('.sub-'+(i+1),'.content',i);
                processBar(i+1);
                // elem.tip($(lis[i]).find("a").html(),1);
                my_tip.tip();
            });
        }
    });

</script>
<!--sub-1-->
    <script>
        $("#modify-user-ack").click(function () {
            my_tip.tip("修改成功！",1,'.sub-1',[{cssName:'opcaity',cssValue:'0.8'}]);
        })
    </script>
<!--sub-2-->
<script>
    $("#modify-user-ack").click(function () {
        $(".mine-box .mine-right .content .modify-panel").css("display","none");
    });
    $("#modify-user").click(function () {
        $(".mine-box .mine-right .content .modify-panel").css("display","table");
    });
    $(".daliy-point").click(function () {
        my_tip.tip("签到成功！余额奖励<font style='color:crimson;font-weight: 400;'>+0.01</font>",1,'.sub-2',[{cssName:'background-color',cssValue:'rgba(255,175,20,0.81)'}]);
        let money_now = (parseFloat($("#money-blance").html())+0.01).toFixed(2)
        $("#money-blance").html(money_now);
        $(".balance-items tbody").prepend("<tr><td align='center'>1</td><td align='center'>签到</td><td align='center'>+0.01</td><td align='center'>xjh</td><td align='center'>" +
            money_now+"</td><td align='center'>" +
            (new Date()).Format() +"</td></tr>");
    })
</script>
    <!--sub-3-->
    <!--sub-4-->
    <!--sub-5-->
    <!--sub-6-->
    <!--sub-7-->
    <!--sub-8-->
    <!--sub-9-->
<script>
    (function ($) {
        $.show_tip = function (arg) {
            this.msg = "不知道为什么，忽然就弹出了一条信息";
            this.location = 1;
            this.parentNode = 'body';
            this.css = [];//[{cssName:'',cssValue:''}]
            this.showFun =function (arg) {
                var uuid = (Math.random()*10000000).toString(16).substr(0,4)+'-'+(new Date()).getTime()+'-'+Math.random().toString().substr(2,5);
                if(typeof (this.parentNode) == "undefined" || typeof ($(this.parentNode))=="undefined"){
                    // console.log($('body').find(".my_tip").length)
                    //
                    // if($('body').find(".my_tip").length<=0)
                    $('body').prepend("<div class='my_tip' id='"+uuid+"'><div><span>"+this.msg+"</span></div></div>");
                }else{
                    // console.log($(parentNode).find(".my_tip").length)
                    // if($(parentNode).find(".my_tip").length<=0)
                    $(this.parentNode).prepend("<div class='my_tip' id='"+uuid+"'><div><span>"+this.msg+"</span></div></div>");
                }

                if(typeof (this.location) =="undefined"|| this.location==="top" || this.location==="" || this.location ==1){
                    $(".my_tip").css("top",'10%');
                }else if(this.location === 'top'|| this.location ==2){
                    $(".my_tip").css("center",'50%');
                }else if(this.location === 'bottom'|| this.location ==3){
                    $(".my_tip").css("top",'90%');
                }else{
                    $(".my_tip").css("top",'10%');
                }

                // if(typeof (this.msg) =="undefined"|| this.msg===""){
                //     $(".my_tip").html("不知道为什么，忽然就弹出了一条信息");
                // }else{
                    $(".my_tip").html(this.msg);
                // }

                if(typeof (this.css) != "undefined") {
                    for(let cssIndex = 0; cssIndex < this.css.length; cssIndex++) {
                        $(".my_tip").css(this.css[cssIndex].cssName, this.css[cssIndex].cssValue);
                    }
                }

                $(".my_tip").css("display","inline-block");

                $(".my_tip").animate({
                    opacity: 1,
                    top: '-=2%'
                    // width: my_tipW,
                    // left: my_left - my_tipW/2
                },100);
                $(".my_tip").animate({transform: 'translate(-50%,-50%) scale(1)',top:'+=4%'},800);
                $(".my_tip").animate({
                    opacity: 0,
                    top: "-=10%"
                    // dispaly: 'none',
                    // width: 0,
                    // left: my_left + my_tipW
                }, {duration:500,complete:function () {
                        $('#'+uuid).detach();

                    }});
            };
            this.setMsg = function (val) {
                if(typeof (val) != "undefined")
                    this.msg = val;
            }
            this.getMsg = function () {
                return this.msg;
            }
            this.setLocation = function (val) {
                if(typeof (val) != "undefined")
                this.location = val;
            }
            this.setLocation = function () {
                return this.location;
            }
            this.setParentNode = function (val) {
                if(typeof (val) != "undefined") this.parentNode = val;
            }
            this.getParentNode = function () {
                return this.parentNode;
            }
            this.setCss = function (val) {
                if(typeof (val) != "undefined") this.css = val;
            }
            this.getCss = function () {
                return this.css;
            }
        };

    })(jQuery);


    var my_tip = {
        tip: function show(msg,location,parentNode,css) {
            var action =new $.show_tip();
            action.setMsg(msg);
            action.setLocation( location);
            action.setParentNode(parentNode);
            action.setCss(css);
            action.showFun();
        }
    }
</script>
<!--//时间-->
<script>
    Date.prototype.Format = function(formatStr)  {
        if(typeof (formatStr) =="undefined")
            formatStr = (new Date()).toLocaleString( );
        var str = formatStr;
        // var Week = ['日','一','二','三','四','五','六'];

        str=str.replace(/yyyy|YYYY/,this.getFullYear());
        str=str.replace(/yy|YY/,(this.getYear() % 100)>9?(this.getYear() % 100).toString():'0' + (this.getYear() % 100));

        str=str.replace(/MM/,this.getMonth()>9?this.getMonth().toString():'0' + this.getMonth());
        str=str.replace(/M/g,this.getMonth());


        // str=str.replace(/w|W/g,Week[this.getDay()]);

        str=str.replace(/dd|DD/,this.getDate()>9?this.getDate().toString():'0' + this.getDate());
        str=str.replace(/d|D/g,this.getDate());

        str=str.replace(/hh|HH/,this.getHours()>9?this.getHours().toString():'0' + this.getHours());
        str=str.replace(/h|H/g,this.getHours());
        str=str.replace(/mm/,this.getMinutes()>9?this.getMinutes().toString():'0' + this.getMinutes());
        str=str.replace(/m/g,this.getMinutes());

        str=str.replace(/ss|SS/,this.getSeconds()>9?this.getSeconds().toString():'0' + this.getSeconds());
        str=str.replace(/s|S/g,this.getSeconds());

        return str;
    }
</script>
</body>
</html>